
import { useEffect, useState, useMemo, Fragment } from "react"
import * as api from "@/api/product"
import { Table, Image, Button, Spin, message, Modal } from "antd"
import { DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons"
import Dialog from "@/components/Dialog"
import { getCategory } from "../../../api/product"
const ProductCategory = () => {
    let [category, setCategory] = useState([])
    //控制dialog显示 隐藏
    let [visible, setVisible] = useState(false)
    //控制modal显示隐藏
    let [show, setShow] = useState(false)
    // 设置加载
    let [loading, setLoading] = useState(false)
    //当前行的数据
    let [currentRow, setCurrentRow] = useState({})
    //获取类目列表
    let getCategoryList = () => {
        setLoading(true)
        api.getCategory()
            .then(res => {
                console.log(res)
                setCategory([...res.data.data].reverse())
                setLoading(false)
            })
    }
    //删除类目
    let handleDeleteCategory = () => {

        let { cId: category_id } = currentRow;
        api.deleteCategory(category_id)
            .then(res => {
                if (res.data.state) {
                    getCategoryList()
                    message.success('删除成功')
                } else {
                    message.error('删除失败,' + res.data.msg)
                }
            })
    }
    useEffect(() => {
        getCategoryList()
    }, [])

    let dataSource = useMemo(() => {
        console.log(category)
        return category.map(item => ({
            cImg: item.categoryImgurl,
            cId: item.category_id,
            cName: item.categoryName,
            cCTime: item.createTime,
            creator: item.creator,
            updateTime: item.updateTime,
            updator: item.updator,
            key: item._id
        }))
    }, [category])

    console.log(dataSource)
    // return <Table columns={[]} dataSource={[]} />;

    let titles = ["类目图片", "类目id", "类目名称", "创建时间", "创建人", "更新时间", "更新人"]

    let columns = useMemo(() => {
        let col = [];
        try {
            let keys = Object.keys(dataSource[0])
            col = titles.map((title, index) => {
                if (keys[index] === 'cImg') {
                    return {
                        title,
                        key: keys[index],
                        dataIndex: keys[index],
                        width: 100,
                        align: 'center',
                        render(v, r) {
                            // v 当前这一列的数据
                            // r 当前这一行的数据对象
                            // console.log('v', v)
                            // console.log('r', r)
                            return (
                                <Image width={50} src={v ? v : "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"}></Image>
                            )
                        }
                    }
                } else {
                    return {
                        align: 'center',
                        title,
                        key: keys[index],
                        dataIndex: keys[index]
                    }
                }
            })

            //最后一列需要自己定义几个按钮

            let lastColumnObj = {
                title: "操作",
                key: 'operate',
                align: 'center',
                render(_, r) {
                    return (
                        <Fragment>
                            <Button icon={<EyeOutlined />}>查看</Button>
                            <Button icon={<EditOutlined />}>编辑</Button>
                            <Button onClick={() => {
                                //弹出确认框
                                setShow(true)
                                //设置currentRow数据
                                setCurrentRow(r)
                            }} danger icon={<DeleteOutlined />}>删除</Button>
                        </Fragment>
                    )
                }
            }
            //添加到数组末尾
            col.push(lastColumnObj)
            return col
        } catch (e) {
            console.log(e)
        }
    }, [category])

    // let columns = [
    //     {
    //         title: "类目图片",
    //         key: "cImg",
    //         dataIndex: 'cImg',
    //     },
    //     {
    //         title: "类目id",
    //         key: "cId",
    //         dataIndex: 'cId',
    //     },
    // ]

    let handleOk = (instance) => {
        console.log(instance)
        //调用表单提交的方法
        instance.current.submit()
        setVisible(false)
    }

    let handleCancel = () => {
        setVisible(false)
    }
    //添加
    let handleAdd = () => {
        setVisible(true)
    }
    return (
        <Fragment>
            <Modal
                title="删除提示"
                content
                visible={show}
                onOk={() => {
                    //删除数据
                    handleDeleteCategory()
                    //关闭弹框
                    setShow(false)
                }}
                onCancel={() => {
                    setShow(false)
                    message.info('已取消删除')
                }}
                okText="确认"
                cancelText="取消"
            >
                <b>将永久删除数据,是否确定?</b>
                <h1 style={{ color: 'red' }}>警告⚠️:不要删除vip类目</h1>
            </Modal>
            <Dialog onOk={handleOk} visible={visible} onCancel={handleCancel} handleGetCategory={getCategoryList} />
            <Button type='primary' onClick={handleAdd}>点击增加</Button>
            <Table bordered dataSource={dataSource} columns={columns} loading={loading}>
            </Table>
        </Fragment >
    )
}

export default ProductCategory